<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      class="demo-ruleForm"
      v-if="flag"
    >
      <el-form-item label="公告内容:" prop="title"  style="width: 410px;">
        <el-input v-model="ruleForm.title" clearable placeholder="请输入 公告内容"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="ruleForm.status" clearable placeholder="请选择 状态" style="width: 310px;">
          <el-option label="撤销" value="0"></el-option>
          <el-option label="公布" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否置顶" prop="isTop">
        <el-select v-model="ruleForm.isTop" clearable placeholder="请选择 是否置顶" style="width: 310px;">
          <el-option label="否" value="0"></el-option>
          <el-option label="是" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="120px">
        <el-button type="primary" @click="submitForm" size="mini"><i class="el-icon-search"></i> 搜索</el-button>
        <el-button @click="resetForm('ruleForm')" size="mini"><i class="el-icon-delete"></i> 清空</el-button>
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: space-between;">
      <div>
        <el-button type="primary" size="small" @click="xj"><i class="el-icon-plus"></i> 新增</el-button>
      </div>
      <div>
        <el-button @click="sx" icon="el-icon-refresh" circle></el-button>
        <el-button @click="xs" icon="el-icon-search" circle></el-button>
      </div>
    </div>
    <template>
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%; text-align: center; margin-top: 10px;">
        <el-table-column
          type="index"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="title"
          label="公布内容"
          width="442">
        </el-table-column>
        <el-table-column
          label="状态"
          width="442">
          <template slot-scope="scope" 
          >
          <el-tag size="medium" :type="scope.row.status === 1 ? 'primary' : 'danger'">{{scope.row.status==1 ?'公布':'撤销'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="是否置顶"
          width="442">
          <template slot-scope="scope" 
          >
          <el-tag size="medium" type="primary" >{{scope.row.isTop==1 ?'是':'否'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i> 修改</el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i> 删除</el-button>
        </template>
      </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog title="新增" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rul" ref="form">
        <el-form-item label="公告标题" :label-width="formLabelWidth" prop="title">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <template>
            <el-radio v-model="form.isTop" :label=0>公布</el-radio>
            <el-radio v-model="form.isTop" :label=1>撤销</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="置顶" :label-width="formLabelWidth">
          <template>
            <el-radio v-model="form.status" :label=0>是</el-radio>
            <el-radio v-model="form.status" :label=1>否</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="咨询问候" :label-width="formLabelWidth" style="width: 95%;">
            <vue-ueditor-wrap
            v-model="form.content"
            :config="myConfig"
            ></vue-ueditor-wrap>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qx">取 消</el-button>
        <el-button type="primary" @click="qd('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap"
export default {
  components: {
    VueUeditorWrap
  },
  data () {
    return {
      myConfig: {
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 300,
        // 访问 UEditor 静态资源的根路径
        UEDITOR_HOME_URL: "/UEditor/",
        // 服务器接口（这个接口是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用）
        severUrl: " //ueditor.szcloudplus.com/cos"
      },
      ruleForm: {
        title: '',
        isTop: '',
        status: ''
      },
      flag: true,
      rules: {

      },
      rul: {
        title: [
          { required: true, message: '公告标题不能为空', trigger: 'blur' }
        ]
      },
      id: '',
      formLabelWidth: '80px',
      form: {
        title: '',
        content: '',
        isTop: 0,
        status: 1,
        id: 0,
        url: ''
      },
      dialogFormVisible: false,
      total: 0,
      currentPage4: 1,
      page: {
        current: 1,
        size: 10
      },
      tableData: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    xj () {
      this.dialogFormVisible = true
    },
    qx () {
      this.dialogFormVisible = false
    },
    qd (formName) {
      this.form.t = new Date().getTime()
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http('apis/shop/notice', {
            method: 'post',
            data: {
              t: this.form.t,
              title: this.form.title,
              content: this.form.content,
              isTop: this.form.isTop,
              id: this.form.id,
              status: this.form.status,
              url: this.form.url
            }
          }).then((res) => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.dialogFormVisible = false
            this.getList()
          })
        } else {
          return false
        }
      })
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
      this.id = row.id
      this.$confirm('确定进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        this.$http('apis/shop/notice/' + this.id, {
          method: 'delete'
        })
        this.getList()
      }).catch(() => {
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.page.size = val
      console.log(this.page.size)
      this.getList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.page.current = val
      this.getList()
    },
    xs () {
      if (this.flag === true) {
        this.flag = false
      } else {
        this.flag = true
      }
    },
    submitForm () {
      this.page.title = this.ruleForm.title
      this.page.isTop = this.ruleForm.isTop
      this.page.status = this.ruleForm.status
      this.getList()
    },
    sx () {
      this.page.title = ''
      this.page.isTop = ''
      this.page.status = ''
      this.getList()
    },
    getList () {
      this.page.t = new Date().getTime()
      this.$http('apis/shop/notice/page', {
        params: {
          t: this.page.t,
          size: this.page.size,
          current: this.page.current,
          title: this.page.title,
          isTop: this.page.isTop,
          status: this.page.status
        }
      }).then((res) => {
        console.log(res.data.records)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
.demo-ruleForm{
  display: flex;
}
>>>.el-input__inner{
  height: 32px;
  line-height: 32px;
}
.el-form-item{
  margin-bottom: 14px;
}
>>>.el-table th{
  background-color: #fafafa;
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
  color: rgba(0, 0, 0, .85);
}
>>>.el-table td{
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
}
</style>